$(document).ready(function() {
	restoBootLoader.init();
});
var restoBootLoader = {
	
	init: function(){
		$('#viewMap').click(function(event){
			event.preventDefault();
			var getLat = $('#viewMap').attr('data-lat');
			var getLng = $('#viewMap').attr('data-lng');
			$(".overlayHolder").fadeToggle("fast");
			overlayPopUp = '';
			overlayPopUp += '<div class="popUpHolder">';
				overlayPopUp += '<div class="headerPopUp"><i class="icon-map-marker icon-white"></i> Select map location.';
					overlayPopUp += '<div class="closeHolder closeOverlay"><i class="icon-remove icon-white"></i></div>';
				overlayPopUp += '</div>';
				overlayPopUp += '<div class="popUpContent">';
					overlayPopUp += '<div class="alert alert-info" style="margin-bottom:5px"><i class="icon-question-sign"></i>';
						overlayPopUp += '<span>Drag the red marker to select the location of the restaurant.</span>';
					overlayPopUp += '</div>';
					overlayPopUp += '<div class="mapContainer"><div id="map-canvas"></div></div>';
				overlayPopUp += '</div>';
				overlayPopUp += '<i class="clearfix"></i>';
				overlayPopUp += '<div class="popUpFooHolder">';
					overlayPopUp += '<div class="foo">';
						overlayPopUp += '<button class="btn btn-success btn-mini closeOverlay" style="float:right"><i class="icon-ok"></i> Save Map</button>';
					overlayPopUp += '</div>';
			overlayPopUp += '<i class="clearfix"></i>';
				overlayPopUp += '</div>';
			overlayPopUp += '</div>';
			$('.boxOverlayContent').html(overlayPopUp);
			$('.closeOverlay').click(function(){
				$(".overlayHolder").hide();
			});
			initializeMap(getLat, getLng);
		});
	}
}

function initializeMap(getLat, getLng)
{
	if(getLat=='' || getLng==''){
		var getLatVal = 14.59207;
		var getLngVal = 121.059534;
	}
	else
	{
		var getLatVal = getLat;
		var getLngVal = getLng;
	}
	var myLatLng = new google.maps.LatLng(getLatVal, getLngVal);
	var mapOptions = {
	  center: myLatLng,
	  zoom: 12,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
	var marker = new google.maps.Marker({
	  position: myLatLng,
	  map: map,
	  title: 'Drag Me!',
	  draggable:true,
	});

	marker.setMap(map);

	google.maps.event.addListener(marker, "drag", function(){
		document.getElementById("latlng").value=marker.position.toUrlValue();
	});
}